<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>商品详情</title>
    <link th:href="@{/static/css/public.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css/detail.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css/you_like.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css/jqzoom.css}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" th:src="@{/static/js/jquery-1.3.2.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/html5.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jqzoom.js}"></script>
</head>
<body>
<!--header-->
<header class="header">
    <!--topBar-->
    <div class="topBar" th:replace="/top_bar :: .topBar"></div>
    <!--//topBar-->
    <!--headerMain-->
    <div class="headerMain layout clearfix" th:replace="/header_main :: .headerMain"></div>
    <!--//headerMain-->
    <!--headerNav-->
    <div class="headerNav" th:replace="/header_nav :: .headerNav"></div>
    <!--//headerNav-->
</header>
<!--//header-->
<!--container-->
<div class="container">
    <div class="layout m10-b">
        <!--面包屑-->
        <div class="breadcrumb">
            <a href="#">首页</a> &gt; <a href="#">商品一级分类名称</a> &gt; <a href="#">商品二级分类名称</a> &gt; 商品名称
        </div>
        <!--//面包屑-->
        <div class="product-intro clearfix">
            <!--商品展示-->
            <div class="product-info-img">
                <!--图片展示-->
                <div class="img-wrap">
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                    <div class="img-big">
                        <a th:href="@{${itemDetail.imgPath}}" ><img width="350" height="350" th:src="@{${itemDetail.imgPath}}" /></a>
                    </div>
                </div>
                <!--//图片展示-->
                <!--图片按钮-->
                <div class="spec-lists">
                    <div class="spec-items">
                        <ul class="clearfix" id="slider">
                            <li class="selected"><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                            <li><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                            <li><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                            <li><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                            <li><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                            <li><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                            <li><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                            <li><span><img th:src="@{${itemDetail.imgPath}}" /></span></li>
                        </ul>
                    </div>
                </div>
                <!--//图片按钮-->
                <div class="share-sns clearfix">
                    <span>分享到：</span>
                    <a href="#"><img th:src="@{/static/images/shareIcon-weibo.png}" /></a>
                    <a href="#"><img th:src="@{/static/images/shareIcon-tencent.png}" /></a>
                    <a href="#"><img th:src="@{/static/images/shareIcon-renren.png}" /></a>
                    <a href="#"><img th:src="@{/static/images/shareIcon-qzone.png}" /></a>
                    <a href="#"><img th:src="@{/static/images/shareIcon-sohu.png}" /></a>
                    <a href="#"><img th:src="@{/static/images/shareIcon-more.png}" /></a>
                </div>
            </div>
            <script type="text/javascript" th:src="@{/static/js/jquery.bxSlider.min.js}"></script>
            <script type="text/javascript">
                $(function(){
                    $(".img-wrap .img-big").eq(0).show().siblings().hide();
                    $(".spec-items li").hover(function(){
                        var img_index=$(".spec-items li").index(this);
                        var big_index=img_index-1;
                        $(this).addClass("selected").siblings().removeClass("selected");
                        $(".img-wrap .img-big").eq(big_index).show().siblings().hide();
                    });
                });

                //jqzoom
                $('.img-wrap a').jqzoom({
                    zoomType: 'standard',
                    alwaysOn : false,
                    zoomWidth: 300,
                    zoomHeight:300,
                    position:'left',
                    xOffset: 10,
                    yOffset: 0,
                    showEffect : 'fadein',
                    hideEffect: 'fadeout'
                });

                $(document).ready(function(){
                    $('#slider').bxSlider({
                        auto:false , //false true
                        displaySlideQty: 5, //显示数 量
                        moveSlideQty:1, //切换数量
                        infiniteLoop:false,
                        showNum:5
                        //hideControlOnEnd:true
                        //startingSlide:5
                        //prevSelector: 'left',
                        //nextSelector: 'right',
                    })
                });
            </script>
            <!--商品展示-->
            <!--商品说明右侧 开始-->
            <div class="fl-l product_property">
                <!--属性-->
                <div class="pro_meta" >
                    <ul class="clearfix">
                        <li class="name border-b">
                            <span th:text="${itemDetail.itemName}">苹果（APPLE）iPhone 5s 16G版 3G手机（金色）WCDMA/GSM</span> <span class="span01">商品卖点显示在商品名称之后字体字
号粗细同商品名称，字体颜色为红色。卖点最多为50个字符。每行最多显示50字符，超出换行。</span>
                        </li>
                        <li>
                            <span class="sp_l">商&nbsp;城&nbsp;价：</span>
                            <div class="fl-l">
                                <del th:text="'￥'+${itemDetail.price}">¥</del>
                            </div>
                        </li>
                        <li>
                            <span class="sp_l">活&nbsp;动&nbsp;价：</span>
                            <div class="fl-l">
                                <strong><em class="tb-rmb-num" th:text="'￥'+${itemDetail.promotionPrice}">¥3558</em></strong>
                            </div>
                        </li>
                        <li>
                            <span class="sp_l">品牌信息：</span>
                            <div class="fl-l">
                                <span class="span02" th:text="${itemDetail.brandName}"></span>  <a class="to-detail" href="#">详情说明</a>
                            </div>
                        </li>
                        <li>
                            <span class="sp_l">可选颜色：</span>
                            <div class="fl-l action-bate">
                                <a class="selected">黑色<em></em></a><a>白色<em></em></a>
                            </div>
                        </li>
                        <li>
                            <span class="sp_l">选择容量：</span>
                            <div class="fl-l action-bate">
                                <a class="selected">16G<em></em></a><a>32G<em></em></a>
                            </div>
                        </li>
                        <li>
                            <span class="sp_l">购买方式：</span>
                            <div class="fl-l action-bate">
                                <a>裸机<em></em></a><a class="selected">合约<em></em></a>
                            </div>
                        </li>
                        <li>
                            <span class="sp_l">库　　存：</span>
                            <div class="fl-l">
                                <span th:text="${itemDetail.stock}">现货</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--属性-->
                <!--phone_key-->
                <dl class="phone_num clearfix">
                    <dt class="fl-l">购买数量：</dt>
                    <dd class="fl-l">
            <span class="tb_stock">
              <a href="#" class="tb_reduce">-</a>
		      <input type="text" value="1" id="buynum" />
			  <a href="#" class="tb_increase">+</a>
            </span>
                    </dd>
                </dl>
                <!--phone_key-->
                <!--已选择-->
                <div class="phone_choosed">
                    <span>此商品由　<a href="#" class="f-big f-orange1" th:text="${itemDetail.shopName}"></a>　负责销售及发货</span>
                    <div class="add_btn"><a href="#" class="btn btn-red">立即购买</a><a href="#" class="btn btn-coffee">加入购物车</a>请移步购物车选择合约套餐</div>
                </div>
                <!--已选择-->
            </div>
            <!--商品说明右侧 结束-->
        </div>
        <!--猜你喜欢-->
        <div class="you-like">
            <h3>猜你喜欢</h3>
            <ul class="you-like-list">
                <li class="you-like-item">
                    <p class="item-img"><a href="#"><img th:src="@{/static/picture/small_110x110.jpg}" /></a></p>
                    <p class="item-info">
                        <a href="#">苹果（APPLE）iPhone 4S 8G版 3G手机（白色）WCDMA/GSM</a>
                    </p>
                    <p class="item-price">￥<em>2398</em></p>
                </li>
                <li class="you-like-item">
                    <p class="item-img"><a href="#"><img th:src="@{/static/picture/small_110x110.jpg}" /></a></p>
                    <p class="item-info">
                        <a href="#">苹果（APPLE）iPhone 4S 8G版 3G手机（白色）WCDMA/GSM</a>
                    </p>
                    <p class="item-price">￥<em>2398</em></p>
                </li>
            </ul>
        </div>
        <!--//猜你喜欢-->
        <!--右侧详情-->
        <div class="product-detail fl-r">
            <!--随心配-->
            <div class="bundle clearfix m10-b">
                <h3 class="bundle-head">
                    <span>随心配</span>
                    <a href="#" class="more">进入配件选购中心&gt;&gt;</a>
                </h3>
                <div class="bundle-data">
                    <div class="bundle-list">
                        <ul id="bundleSlider">
                            <li class="bundle-item">
                                <p class="item-img"><a href="#"><img th:src="@{/static/picture/small_110x110.jpg}" /></a></p>
                                <p class="item-info"><a href="#">苹果（APPLE）iPhone 5s 16G版 3G</a></p>
                                <p class="item-price"><input type="checkbox" />￥<em>4898</em></p>
                            </li>
                        </ul>
                    </div>
                    <div class="bundle-extra">
                        <p>已选择<em>0</em>个配件</p>
                        <p>商城价格合计：<span class="extra-price">￥<em>4898</em></span></p>
                        <p class="btn-sku"><a href="#" class="btn btn-coffee">搭配购买</a></p>
                    </div>
                </div>
            </div>
            <script type="text/javascript" th:src="@{/static/js/jquery.bxSlider.min.js}"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $('#bundleSlider').bxSlider({
                        auto:false , //false true
                        displaySlideQty: 3, //显示数 量
                        moveSlideQty:1, //切换数量
                        infiniteLoop:false,
                        showNum:3
                        //hideControlOnEnd:true
                        //startingSlide:5
                        //prevSelector: 'left',
                        //nextSelector: 'right',
                    })
                });
            </script>
            <!--随心配-->
            <!--tabs-->
            <div class="tabs detail m10-b">
                <ul class="cut fixed">
                    <li class="current">商品详情</li>
                    <li>规格参数</li>
                    <li>包装清单</li>
                    <li>常见问题</li>
                </ul>
                <div class="tab detail-main">
                    <img th:src="@{/static/picture/detail.jpg}" />
                </div><!--//商品详情-->
                <div class="tab detail-main">
                    <h4>规格参数</h4>
                    <table>
                        <tr th:each="s : ${itemSpec}">
                            <th ><span th:text="${s.specName}+':'"></span></th>
                            <td><span>测试数据</span></td>
                        </tr>
                        <!--<tr>
                            <th>上架时间：</th>
                            <td>2014-01-26 09:06:16</td>
                            <th>商品编号：</th>
                            <td>1057746</td>
                        </tr>
                        <tr>
                            <th>系统：</th>
                            <td>苹果（IOS）</td>
                            <th>外观设计：</th>
                            <td>直板</td>
                        </tr>
                        <tr>
                            <th>网络：</th>
                            <td>联通3G（WCDMA），移动2G/联通2G（GSM），移动3G（TD-SCD）</td>
                            <th>商品产地：</th>
                            <td>中国大陆</td>
                        </tr>-->
                    </table>
                </div><!--//规格参数-->
                <div class="tab detail-main">
                    <h4>包装清单</h4>
                    <table>
                        <tr>
                            <th>电池型号：</th>
                            <td>内置充电式锂离子电池</td>
                            <th>电池类型：</th>
                            <td>锂电池</td>
                        </tr>
                        <tr>
                            <th>数据线：</th>
                            <td>苹果8pin</td>
                            <th>耳机：</th>
                            <td>1057746</td>
                        </tr>
                        <tr>
                            <th>系统：</th>
                            <td>苹果（IOS）</td>
                            <th>商品毛重：</th>
                            <td>3.5mm</td>
                        </tr>
                        <tr>
                            <th>机身尺寸：</th>
                            <td>高：123.8 毫米 (4.87 英寸) 宽：58.6 毫米 (2.31 英寸) ...</td>
                            <th>机身重量：</th>
                            <td>重量：112 克 (3.95 盎司)</td>
                        </tr>
                    </table>
                </div><!--//包装清单-->
                <div class="tab detail-main">
                    <div class="aq">
                        <div class="aq-head">常见问题？</div>
                        <div class="aq-con">
                            <dl>
                                <dt>如何条哦选商品？</dt>
                                <dd>点击页面上方“加入购物车”按钮或页面下拉时顶部导航上的“加入购物车”按钮将商品加入购物车，再点击页面右上角的“购物车”前往购物车页面进行结算。</dd>
                                <dt>收藏商品功能</dt>
                                <dd>点击“收藏按钮”后，按钮中的白心亮起,背景由黑色变为黄色代表收藏成功，再次点击取消收藏。您可在“个人中心”中的我的收藏查看所有收藏商品。</dd>
                                <dt>维修网点销售配件吗？</dt>
                                <dd>所有授权维修网点具备维修手机标配里配件的功能，部分指定授权维修网点可销售标配及部分官网配件，具体销售的产品及价格请以修网点信息为准。</dd>
                                <dt>退换货办理流程</dt>
                                <dd style="border:0;">您可拨打小米客服中心400-100-5678与客服人员沟通，或登录小米网“我的订单” ->“订单详情”下方点击“申请售后服务”并填写相应信息，小米看到您的申请，会安排工作人员与您进行退换货质量确认并办理相关事宜.</dd>
                            </dl>
                        </div>
                    </div>
                </div><!--//常见问题-->
            </div>
            <script>
                //商品详情
                $(function(){
                    var siteTop = $(".detail .cut").offset().top;
                    $(window).scroll(function(){
                        var scrolltop = $(document).scrollTop();
                        if(scrolltop >= siteTop){
                            $(".detail .cut").removeClass("fixed");
                        }else{
                            $(".detail .cut").addClass("fixed");
                        }
                    });

                    $(".detail .cut li").click(function(){
                        var index = $(".detail .cut li").index(this);
                        $(this).addClass("current").siblings().removeClass("current");
                        $("body,html").stop().animate({scrollTop:$(".detail .detail-main").eq(index).offset().top},600);
                    });
                });
            </script>
            <!--//tabs-->
        </div>
        <!--右侧详情-->
        <div class="c"></div>
    </div>
</div>
<!--//container-->
<!--footer-->
<footer class="footer" th:replace="/footer :: .footer"></footer>
<!--//footer-->

</body>
</html>
